<template>
	<el-row>
		<el-col :span="8">
			<el-button type="primary" @click="adduser">增加用户</el-button>
		</el-col>
		<el-col :span="8">
			<el-input type="text" v-model="searchvalue" placeholder="请输入用户名" style="width:200px"/>
		</el-col>
		<el-col :span="8">
			<el-button type="primary" @click="search">搜索</el-button>
		</el-col>
	</el-row>
	<el-table :data="userlist" border style="width:100%">
		<el-table-column prop="id" label="用户id" />
		<el-table-column prop="name" label="用户姓名"/>
		<el-table-column prop="age" label="用户年龄" />
		 <el-table-column fixed="right" label="操作" width="120">
		      <template #default='scope'>
		        <el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
		        <el-button link type="primary" size="small">修改</el-button>
		      </template>
		    </el-table-column>
	</el-table>
	
	  <el-dialog
	    v-model="dialogVisible"
	    title="增加用户"
	    width="70%"
	    :before-close="handleClose"
	  >
		<el-form :model="form" label-width="120px">
		    <el-form-item label="用户姓名:">
		      <el-input v-model="form.name" />
		    </el-form-item>
			<el-form-item label="用户年龄:">
			  <el-input v-model="form.age" />
			</el-form-item>
		</el-form>
		<el-button type="primary" @click="onSubmit">提交</el-button>
	  </el-dialog>
	
</template>

<script>
export default{
		data(){
			return{
				dialogVisible:false,
				form:{
					name:'',
					age:20,
				},
				searchvalue:'',
			}
		},
		methods:{
			handleDel(row){
				var that=this
				this.$axios.post('http://localhost/springboot/deleteUserByIdjson/'+row.id)
				.then(function(res){
					that.userlist=res.data.data
					that.getuserdata()
				})
				.catch(function(err){
					alert('删除失败！')
				})
			},
			search(){
				var that=this
				this.$axios.post('http://localhost/springboot/searchjson/'+this.searchvalue)
				.then(function(res){
					that.userlist=res.data.data
				})
				.catch(function(err){
					alert('搜索失败！')
				})
			},
			getuserdata(){
				var that=this
				console.log(this.$axios)
				this.$axios.get('http://localhost/springboot/userlistjson')
				.then(function(res){
					console.log(res.data.data)
					that.userlist=res.data.data
				})
				.catch(function(err){
					alert('连接失败！')
				})
			},
			
			adduser(){
				this.dialogVisible=true
			},
			onSubmit(){
				var that=this
				this.$axios.post('http://localhost/springboot/addcommitjson',this.form)
				.then(function(res){
						that.form={}
						that.dialogVisible=false
						that.getuserdata()
						that.$message({
							message:'添加成功',
							type:'success',
						})
					
				})
				.catch(function(err){
					alert("发送失败！")
				})
			}
		},
		mounted(){
			this.getuserdata()
		},
	}
</script>

<style>
	#app {
	  font-family: Avenir, Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	  margin-top: 60px;
	}
	a {
		text-decoration: none;
	}
	li {
		list-style: none;
	}
	table {
		margin: 20 auto;
	}
</style>